<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-select v-model="listQuery.idcId" clearable filterable class="filter-item" placeholder="请选择机房">
        <el-option v-for="item in idcOptions" :key="item.id" :label="item.name" :value="item.id"/>
      </el-select>
      <el-select v-model="listQuery.type" clearable filterable class="filter-item" placeholder="请选择主机类型">
        <el-option v-for="item in hostTypeOptions" :key="item" :label="item" :value="item"/>
      </el-select>
      <el-input v-model="listQuery.ip" clearable style="width: 150px" class="filter-item" placeholder="内(公)网IP"/>
      <el-input v-model="listQuery.hostName" clearable style="width: 150px" class="filter-item" placeholder="主机名"/>
      <el-select v-model="listQuery.env" clearable filterable class="filter-item" placeholder="请选择应用环境">
        <el-option v-for="item in envOptions" :key="item.name" :label="item.name" :value="item.name"/>
      </el-select>
      <el-select v-model="listQuery.relativeHost" clearable filterable class="filter-item" placeholder="请选择宿主机">
        <el-option v-for="item in hostOptions" :key="item.id" :label="item.hostName" :value="item.hostName"/>
      </el-select>
      <el-input v-model="listQuery.purpose" clearable style="width: 150px" class="filter-item" placeholder="主机功能"/>
      <el-select v-model="listQuery.clusterName" clearable filterable class="filter-item" placeholder="请选择分类">
        <el-option v-for="(item, index) in clusterOptions" :key="index" :value="item"/>
      </el-select>
      <el-select v-model="listQuery.istatus" clearable filterable class="filter-item" placeholder="请选择状态">
        <el-option v-for="item in istatusOptions" :key="item.key" :label="item.label" :value="item.key"/>
      </el-select>
      <el-input v-model="listQuery.manager" clearable style="width: 150px" class="filter-item" placeholder="负责人"/>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-download" @click="exportA" >导出</el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleCreate">{{ $t('table.add') }}</el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-refresh" @click="handleLoadServer">{{ $t('table.getHost') }}</el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-location-outline" @click="goDeploymentView">{{ $t('table.deploymentView') }}</el-button>
    </div>

    <el-table v-loading="listLoading" :key="tableKey" :data="list" element-loading-text="加载中" border fit highlight-current-row style="width: 100%">
      <el-table-column width="80px" align="center" label="分类">
        <template slot-scope="scope">
          <span>{{ scope.row.clusterName }}</span>
        </template>
      </el-table-column>
      <el-table-column width="80px" align="center" label="主机类型">
        <template slot-scope="scope">
          <span>{{ scope.row.type }}</span>
        </template>
      </el-table-column>
      <el-table-column width="150px" align="center" label="内网IP">
        <template slot-scope="scope">
          <span>{{ scope.row.ip }}</span>
        </template>
      </el-table-column>
      <el-table-column width="120px" align="center" label="公网IP">
        <template slot-scope="scope">
          <span>{{ scope.row.ipPublic }}</span>
        </template>
      </el-table-column>
      <el-table-column width="220px" align="center" label="主机名">
        <template slot-scope="scope">
          <span>{{ scope.row.host }}</span>
        </template>
      </el-table-column>
      <el-table-column width="100px" align="center" label="主机功能">
        <template slot-scope="scope">
          <span>{{ scope.row.purpose }}</span>
        </template>
      </el-table-column>
      <el-table-column width="120px" align="center" label="配置">
        <template slot-scope="scope">
          <span>{{ scope.row.configure }}</span>
        </template>
      </el-table-column>
      <el-table-column width="80px" align="center" label="机房">
        <template slot-scope="scope">
          <span>{{ scope.row.rackName }}</span>
        </template>
      </el-table-column>
      <el-table-column width="60px" align="center" label="应用环境">
        <template slot-scope="scope">
          <span>{{ scope.row.env }}</span>
        </template>
      </el-table-column>
      <el-table-column width="160px" align="center" label="宿主机">
        <template v-if="scope.row.relativeHost" slot-scope="scope">
          <el-button type="primary" size="mini" plain @click="filterRelativeHost(scope.row.relativeHost)">{{ scope.row.relativeHost }}</el-button>
        </template>
      </el-table-column>
      <el-table-column width="80px" align="center" label="负责人">
        <template slot-scope="scope">
          <span>{{ scope.row.manager }}</span>
        </template>
      </el-table-column>
      <el-table-column width="80px" align="center" label="状态">
        <template slot-scope="scope">
          <span>{{ statusDict[scope.row.istatus] }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="90px" label="备注">
        <template slot-scope="scope">
          <span>{{ scope.row.comment }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.actions')" fixed="right" align="center" width="260px" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="success" size="mini" @click="handleDetail(scope.row)">详情</el-button>
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">{{ $t('table.edit') }}</el-button>
          <el-button type="danger" size="mini" @click="handleDelete(scope.row)">{{ $t('table.delete') }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </div>

    <!-- 新增主机数据 Start -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="1000px">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="120px" style="width: 900px; margin-left:5px;">
        <el-row>
          <el-col :span="8">
            <el-form-item label="分类" prop="clusterName">
              <el-select v-model="temp.clusterName" class="filter-item" clearable placeholder="请选择分类">
                <el-option v-for="(item, index) in clusterOptions" :key="index" :value="item"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="主机类型" prop="type">
              <el-select v-model="temp.type" class="filter-item" clearable placeholder="请选择主机类型">
                <el-option v-for="item in hostTypeOption" :key="item" :label="item" :value="item"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="内网IP" prop="ip">
              <el-input v-model="temp.ip" placeholder="正确格式[1.1.1.1]" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="公网IP">
              <el-input v-model="temp.ipPublic" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="主机名" prop="host">
              <el-input v-model="temp.host" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="主机功能" prop="purpose">
              <el-input v-model="temp.purpose" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="CPU核数" prop="numCpus">
              <el-input-number v-model="temp.numCpus" :min="1" :max="999999999" controls-position="right" style="width:180px"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="内存大小(MB)" prop="memTotal">
              <el-input-number v-model="temp.memTotal" :step="1024" :min="1024" :max="999999999" controls-position="right" style="width:180px"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="硬盘大小(G)">
              <el-input-number v-model="temp.diskCapacity" :min="1" :max="999999999" controls-position="right" style="width:180px"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="宿主机">
              <el-select v-model="temp.relativeHost" filterable clearable placeholder="请选择宿主机">
                <el-option v-for="item in hostOptions" :key="item.id" :label="item.hostName" :value="item.hostName"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="机房">
              <el-select v-model="temp.idcId" class="filter-item" clearable placeholder="请选择机房" @change="getCabinetList">
                <el-option v-for="item in idcOptions" :key="item.id" :label="item.name" :value="item.id"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="机柜">
              <el-select v-model="temp.cabinet" class="filter-item" clearable placeholder="请选择机柜" @focus="focusCabinet">
                <el-option v-for="item in cabinetOptions" :key="item.id" :label="item.name" :value="item.name"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="SN序列号">
              <el-input v-model="temp.systemSerialnumber"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="服务器型号">
              <el-input v-model="temp.productname"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="状态">
              <el-select v-model="temp.istatus" class="filter-item" clearable placeholder="请选择状态">
                <el-option v-for="item in istatusOptions" :key="item.key" :label="item.label" :value="item.key"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="采购日期">
              <el-date-picker v-model="temp.purchaseDate" type="date" placeholder="选择采购日期" style="width: 100%;"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="保修到期">
              <el-date-picker v-model="temp.periodDate" type="date" placeholder="选择保修到期" style="width: 100%;"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="负责人">
              <el-select v-model="temp.manager" filterable clearable placeholder="请选择负责人">
                <el-option v-for="item in devOptions" :key="item.id" :label="item.nickname" :value="item.nickname"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="操作系统" prop="os">
              <el-input v-model="temp.os"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作系统版本" prop="osrelease">
              <el-input v-model="temp.osrelease"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="应用环境">
              <el-select v-model="temp.env" class="filter-item" clearable placeholder="请选择应用环境">
                <el-option v-for="item in envOptions" :key="item.name" :label="item.name" :value="item.name"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="CPU型号">
              <el-input v-model="temp.cpuModel"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="kernel版本">
              <el-input v-model="temp.kernelRelease"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="salt版本">
              <el-input v-model="temp.saltversion"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="minitor ID" prop="hostName">
              <el-input v-model="temp.hostName" :disabled="dialogStatus=='update'"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="固定资产编号">
              <el-input v-model="temp.assetNumber"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="部署分组">
              <el-select v-model="temp.groupName" class="filter-item" clearable placeholder="请选择分组">
                <el-option v-for="item in groupOptions" :key="item" :label="item" :value="item"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="是否为k8s">
              <el-select v-model="temp.k8s" filterable clearable>
                <el-option v-for="item in kubernetesOptions" :key="item.key" :label="item.label" :value="item.key"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="备注">
              <el-input :autosize="{ minRows: 2, maxRows: 4}" v-model="temp.comment" type="textarea"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
        <el-button v-if="dialogStatus == 'create'" type="primary" @click="createData">{{ $t('table.confirm') }}</el-button>
        <el-button v-else type="primary" @click="updateData">{{ $t('table.confirm') }}</el-button>
      </div>
    </el-dialog>
    <!-- 新增主机数据 End -->

    <!-- 主机详情 Start -->
    <el-dialog :visible.sync="dialogDetailVisible" title="主机详情" width="1000px">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="100px" style="width: 900px; margin-left:5px;">
        <el-row>
          <el-col :span="8">
            <el-form-item label="主机">
              <el-input v-model="temp.hostName" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="采购日期">
              <el-input v-model="temp.purchaseDate" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="保修到期">
              <el-input v-model="temp.periodDate" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="服务器型号">
              <el-input v-model="temp.productname" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="SN序列号">
              <el-input v-model="temp.systemSerialnumber" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="固定资产编号">
              <el-input v-model="temp.assetNumber" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="操作系统">
              <el-input v-model="temp.osNew" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="kernel版本">
              <el-input v-model="temp.kernelRelease" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="CPU型号">
              <el-input v-model="temp.cpuModel" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="机柜">
              <el-input v-model="temp.cabinetName" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="U数">
              <el-input v-model="temp.udesc" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="salt版本">
              <el-input v-model="temp.saltversion" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="创建时间">
              <el-input v-model="temp.createTimeStr" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="更新时间">
              <el-input v-model="temp.updateTimeStr" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="部署分组">
              <el-input v-model="temp.groupName" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="创建人">
              <el-input v-model="temp.creator" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="更新人">
              <el-input v-model="temp.updator" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDetailVisible = false">关闭</el-button>
      </div>
    </el-dialog>
    <!-- 主机详情 End -->
  </div>
</template>

<script>
import {
  fetchList,
  loadServer,
  fetchPhysicalHostList,
  fetchIdc,
  fetchDevList,
  fetchEnv,
  update,
  insert,
  del,
  fetchClusterList,
  fetchCabinetList
} from '@/api/host'
import { getToken } from '@/utils/auth'
import { generateSign } from '@/utils/signature'

export default {
  name: 'ComplexTable',
  filters: {},
  data() {
    var checkIp = (rule, value, callback) => {
      const reg = /^[[\s\S]{1,}]$/
      if (!reg.test(value)) {
        callback(new Error('请按照此格式[1.1.1.1]输入'))
      } else {
        callback()
      }
    }
    return {
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1, // 当前页数
        limit: 10, // 每页条数
        idcId: '', // 机房id
        relativeHost: '', // 宿主机
        type: '', // 主机类型
        env: '', // 应用环境
        ip: this.$route.query.ip || '', // 内(公)网IP
        purpose: '', // 主机功能
        hostName: '', // 主机名
        clusterName: '', // 分类
        istatus: '', // 状态,
        manager: '' // 负责人
      },
      // 条件筛选主机状态
      istatusOptions: [
        { label: '闲置', key: 0 },
        { label: '在用', key: 1 },
        { label: '故障', key: 2 },
        { label: '报废', key: 3 }
      ],
      // 主机类型
      hostTypeOption: ['physical', 'VMware', 'kvm', 'hype-v'],
      hostTypeOptions: ['VMware', 'kvm', 'hype-v'],
      kubernetesOptions: [
        { label: '否', key: 0 },
        { label: '是', key: 1 }
      ],
      // 部署分组
      groupOptions: ['A', 'B'],
      // 主机状态
      statusDict: {
        0: '闲置',
        1: '在用',
        2: '故障',
        3: '报废'
      },
      idcOptions: [], // 机房
      devOptions: [], // 负责人
      hostOptions: [], // 宿主机
      envOptions: [], // 应用环境
      clusterOptions: [], // 分类
      cabinetOptions: [], // 机柜
      temp: {
        id: undefined,
        clusterName: '', // 分类名
        idcId: '', // 机房
        diskCapacity: '40', // 硬盘大小
        memTotal: '2048', // 内存大小
        numCpus: '1', // CPU核数
        ipPublic: '', // 公网IP
        purpose: '', // 主机功能
        relativeHost: '', // 宿主机
        ip: '', // 内网IP
        groupName: '', // 部署分组
        host: '', // 主机名
        manager: '', // 负责人
        cabinetName: '', // 机柜名称
        purchaseDate: '', // 采购日期
        periodDate: '', // 保修到期
        productname: '', // 服务器型号
        createTime: '', // 创建时间
        updateTime: '', // 更新时间
        createTimeStr: '', // 创建时间
        updateTimeStr: '', // 更新时间
        updator: '', // 更新人
        creator: '', // 创建人
        systemSerialnumber: '', // SN序列号
        saltversion: '', // salt版本
        assetNumber: '', // 固定资产编号
        cpuModel: '', // CPU型号
        os: 'CentOS', // 操作系统型号
        osrelease: '7.6', // 操作系统版本
        osNew: '', // 操作系统型号
        kernelRelease: '2.6.32-504.el6.x86_64', // 操作系统内核
        cabinet: '', // 机柜
        udesc: '', // U数
        istatus: 1, //
        type: 'kvm', // 类型
        env: '', // 环境
        k8s: 0,
        comment: '' // 备注
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '修改',
        create: '新增'
      },
      dialogDetailVisible: false,
      // pvData: [],
      rules: {
        clusterName: [
          { required: true, message: '分类是必填项', trigger: 'blur' }
        ],
        hostName: [
          { required: true, message: '主机是必填项', trigger: 'blur' }
        ],
        os: [{ required: true, message: '操作系统是必填项', trigger: 'blur' }],
        osrelease: [
          { required: true, message: '操作系统版本是必填项', trigger: 'blur' }
        ],
        memTotal: [
          { required: true, message: '内存大小是必填项', trigger: 'blur' }
        ],
        numCpus: [
          { required: true, message: 'CPU核数是必填项', trigger: 'blur' }
        ],
        purpose: [
          { required: true, message: '主机功能是必填项', trigger: 'blur' }
        ],
        host: [{ required: true, message: '主机名是必填项', trigger: 'blur' }],
        type: [
          { required: true, message: '主机类型是必填项', trigger: 'blur' }
        ],
        ip: [
          { required: true, message: '内网IP是必填项', trigger: 'blur' },
          { validator: checkIp, trigger: 'blur' }
        ]
      }
      // downloadLoading: false
    }
  },
  created() {
    this.getList()
    this.getHostList()
    this.getEnvOptions()
    this.getIdcList()
    this.getDevList()
    this.getClusterOptions()
  },
  methods: {
    // 获取主机列表
    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
        this.list = response.data.records
        this.total = response.data.total
        this.listLoading = false
      })
    },
    // 应用环境
    getEnvOptions() {
      fetchEnv().then(response => {
        this.envOptions = response.data
      })
    },
    // 获取宿主机
    getHostList() {
      fetchPhysicalHostList().then(response => {
        this.hostOptions = response.data
      })
    },
    // 机房
    getIdcList() {
      fetchIdc().then(response => {
        this.idcOptions = response.data.records
      })
    },
    // 负责人
    getDevList() {
      fetchDevList().then(response => {
        this.devOptions = response.data
      })
    },
    // 分类
    getClusterOptions() {
      fetchClusterList().then(response => {
        this.clusterOptions = response.data
      })
    },
    // 机柜列表
    getCabinetList(id) {
      this.temp.idcId = id
      const queryCabinet = {
        idcId: id
      }
      fetchCabinetList(queryCabinet).then(response => {
        if (!response.data.length) {
          this.temp.cabinet = ''
        }
        this.cabinetOptions = response.data
      })
    },
    // 跳转到服务部署图
    goDeploymentView() {
      location.href = '#/cmdb/serviceDeployment'
    },
    // 搜索
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },

    // 宿主机搜索
    filterRelativeHost(host) {
      this.listQuery = {
        page: 1, // 当前页数
        limit: 10, // 每页条数
        idcId: '', // 机房id
        relativeHost: host, // 宿主机
        type: '', // 主机类型
        env: '', // 应用环境
        ip: '', // 内(公)网IP
        purpose: '', // 主机功能
        hostName: '', // 主机名
        clusterName: '' // 分类
      }
      this.getList()
    },

    // execl表格导出
    exportA() {
      var url = process.env.BASE_API + '/api/host/exportContact'
      var keys = [
        'env',
        'token',
        'sign',
        'appCode',
        'idcId',
        'relativeHost',
        'type',
        'appEnv',
        'ip',
        'purpose',
        'hostName',
        'clusterName',
        'istatus',
        'manager'
      ]
      var values = [
        process.env.ENV_ROUTE,
        getToken(),
        generateSign(process.env.KEY, process.env.APP_CODE),
        process.env.APP_CODE,
        this.listQuery.idcId,
        this.listQuery.relativeHost,
        this.listQuery.type,
        this.listQuery.env,
        this.listQuery.ip,
        this.listQuery.purpose,
        this.listQuery.hostName,
        this.listQuery.clusterName,
        this.listQuery.istatus,
        this.listQuery.manager
      ]
      this.openWindowWithPost(url, keys, values)
    },
    openWindowWithPost(url, keys, values) {
      var oForm = document.createElement('form')
      oForm.method = 'GET'
      oForm.action = url
      if (keys && values && keys.length === values.length) {
        for (let i = 0; i < keys.length; i++) {
          const oInput = document.createElement('input')
          oInput.type = 'text'
          oInput.name = keys[i]
          oInput.value = values[i]
          oForm.appendChild(oInput)
        }
      }
      oForm.onSubmit = function() {
        window.open(url)
      }
      document.body.appendChild(oForm)
      oForm.submit()
      document.body.removeChild(oForm)
    },
    // 分页
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    // 当前分页
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    // 删除记录
    handleDelete(row) {
      this.$confirm('此删除操作不可还原, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          del(row).then(response => {
            this.getList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
        })
        .catch(() => {})
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        name: '',
        comment: ''
      }
    },
    // 扫描主机
    handleLoadServer() {
      loadServer().then(() => {
        this.getList()
        this.dialogFormVisible = false
        this.$notify({
          title: '成功',
          message: '获取成功',
          type: 'success',
          duration: 2000
        })
      })
    },

    // 并且没有优先选择机房，选择机柜时
    focusCabinet() {
      if (!this.temp.idcId) {
        this.$notify.info({
          title: '消息',
          message: '请先选择机房'
        })
      }
    },
    // 添加
    handleCreate() {
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 详情
    handleDetail(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.dialogDetailVisible = true
    },
    // 编辑
    handleUpdate(row) {
      this.temp = Object.assign({}, row)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 编辑数据
    updateData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          update(tempData).then(() => {
            this.getList()
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '更新成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    // 新增数据
    createData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          insert(tempData).then(() => {
            this.getList()
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '添加成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    }
  }
}
</script>
